<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: coral;
            color: wheat;
            font-size: 100px;
            text-align: center;
            line-height: 400px;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script src="./Lodash/lodash.min.js"></script>
    <script>
        // 需求：鼠标移动次数 +1
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }


        // 手动实现防抖函数
        // 核心思路：
        // 防抖的核心就是利用定时器（setTimeout）来实现
        // 1.声明一个定时器变量
        // 2.当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
        // 3.如果没有定时器则开启定时器，记得存到变量里面
        function debounce(fun, sleepTime) {
            let timner
            return function () {
                if (timner) clearTimeout(timner)
                timner = setTimeout(function () {
                    fun()
                }, sleepTime)
            }
        }

        // lodash库实现防抖，语法： _.debounce(function, 时间)
        box.addEventListener('mousemove', debounce(mouseMove, 500))
    </script>
</body>

</html>